<template>
    <view class="page over-auto-y column">
        <hj-navbar title="相册列表" />
        <!-- 分类 -->
        <view class="category-box flex-wrap pr-14 pl-30 pb-20">
            <view
                class="category-item ft-28 t-3 pl-16 pr-16 mt-16 mr-16 br-8 pt-10 pb-10"
                :class="[currentCategory === item.id ? 'active t-w' : '']"
                v-for="item in categoryList"
                :key="item.id"
                @click="handleSwitch(item)"
            >
                <text>{{ item.name }}</text>
                <text>({{ item.num || 0 }})</text>
            </view>
        </view>
        <!-- 内容区 -->
        <view class="flex-auto w100 over-hide">
            <scroll-view
                scroll-y="true"
                class="big"
                :refresher-enabled="true"
                :refresher-triggered="triggered"
                @refresherrefresh="onRefresh"
            >
                <hj-loading :show="isInitLoad" v-if="isInitLoad" />
                <view class="pr-30 pl-30" v-if="!isInitLoad">
                    <view class="album" v-for="(item, i) in albumList" :key="i">
                        <view
                            class="album-title ft-36 t-3 bold pt-10 pb-12"
                            v-if="item.name && item.num > 0"
                        >
                            {{ item.name }}({{ item.num || 0 }})
                        </view>
                        <view class="album-list flex-wrap space-between">
                            <block v-for="(img, index) in item.imageList" :key="img.id">
                                <view
                                    class="album-item br-12 over-hide mb-18"
                                    v-if="(!item.isShowMore && index < 6) || item.isShowMore"
                                >
                                    <hj-image
                                        :img="img.imageUrl"
                                        :isLoad="false"
                                        width="100%"
                                        height="100%"
                                        mode="aspectFill"
                                        :isPreview="true"
                                        :showPreviewMenu="true"
                                        :previewImagesList="getImgList(item.imageList)"
                                    />
                                    <view
                                        class="album-item-name ft-28 t-w line-height1 text-over-1"
                                    >
                                        {{ img.categoryName || item.name }}
                                    </view>
                                </view>
                            </block>
                        </view>
                        <view
                            class="c-m ft-28 flex-end mb-18 align-center"
                            v-if="!item.isShowMore && item.imageList.length > 6"
                            @click="handleShowMore(item)"
                        >
                            <text class="mr-6">展开更多</text>
                            <hj-image
                                src="more-01.png"
                                :isLoad="false"
                                width="28rpx"
                                height="28rpx"
                                mode="aspectFit"
                            />
                        </view>
                    </view>
                    <view class="ft-24 t-9 pt-10 pb-30">
                        * 图片仅供参考，请以酒店实际情况为准。
                    </view>
                    <hj-safe-footer />
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script setup>
/**
 * @description 酒店相册
 * @author yinzhi
 * @date 2025-05
 */
import { onLoad } from '@dcloudio/uni-app'
import { ref, defineComponent, computed } from 'vue'
import { logger } from '@/utils/log.js'
import { getCategoryListApi, getImageListApi } from '@/libs/api/baseApi.js'
// 引入组件
defineComponent({
    components: {}
})
import { useStore } from 'vuex'
const store = useStore()
// 酒店信息
const hotelInfo = computed(() => store.state.platform.hotelInfo || '')

// 是否初始化加载
const isInitLoad = ref(true)

// 分类类型
const categoryList = ref([])

// 图片列表
const albumList = ref([])

// 获取查看图片的列表
const getImgList = list => {
    return list.map(item => item.imageUrl) || []
}

// 查看更多图片
const handleShowMore = item => {
    albumList.value = albumList.value.map(val => {
        if ((val.id && val.id === item.id) || (!val.id && val.name === item.name)) {
            val.isShowMore = true
        }
        return val
    })
}

// 当前选中的分类
const currentCategory = ref('all')

// 切换分类
const handleSwitch = async item => {
    if (currentCategory.value === item.id) {
        return
    }
    isInitLoad.value = true
    currentCategory.value = item.id
    await getAlbumList()
}

// 获取分类列表
const getCategoryList = async () => {
    try {
        const data = await getCategoryListApi({
            id: hotelInfo.value?.id || ''
        })
        const total = data.map(item => item.num).reduce((sum, num) => sum + num, 0)
        categoryList.value = [{ name: '全部', id: 'all', num: total }, ...data]
    } catch (error) {
        logger.error('[getCategoryListApi] 获取分类列表失败: ', error)
    }
}

// 获取相册列表
const getAlbumList = async () => {
    if (!hotelInfo.value.id) return
    try {
        const data = await getImageListApi({
            categoryId: currentCategory.value === 'all' ? '' : currentCategory.value,
            hotelId: hotelInfo.value?.id || ''
        })
        const list = data.map(item => {
            return {
                ...item,
                isShowMore: false
            }
        })
        albumList.value = list || []
        let time = setTimeout(() => {
            isInitLoad.value = false
            clearTimeout(time)
        }, 400)
    } catch (error) {
        isInitLoad.value = false
        logger.error('[getAlbumList] 获取相册列表失败: ', error)
    }
}

// 页面加载
onLoad(async () => {
    await getCategoryList()
    await getAlbumList()
})

// 下拉刷新事件
const triggered = ref(false)
const _freshing = ref(false)

// 下拉刷新
const onRefresh = async () => {
    // 防止多次刷新
    if (_freshing.value) return
    _freshing.value = true
    triggered.value = true
    let time = setTimeout(() => {
        getRefresh()
        clearTimeout(time)
    }, 600)
}
// 刷新事件 等所有接口请求 完成后使刷新动画回弹
const getRefresh = () => {
    Promise.all([getAlbumList()])
        .then(() => {
            triggered.value = false
            _freshing.value = false
        })
        .catch(() => {
            triggered.value = false
            _freshing.value = false
        })
}
</script>

<style scoped lang="scss">
.album {
    &-item {
        width: 336rpx;
        height: 336rpx;
        position: relative;
        &-name {
            position: absolute;
            bottom: 16rpx;
            padding: 0 16rpx;
            left: 0;
        }
    }
}
.category-item {
    background: $uni-bg-color-hover;
}
.active {
    background: $uni-color-primary;
}
</style>
